<template>
  <PublicPage page-name="订单详情" :borderType="true" :showNav="true" :customBack="goBackFn">
    <view class="orderDetails">
      <!-- 顶部提示 -->
      <!-- <view class="justify-between title">
        <view style="color: #ed6a0c">打开提醒，立即接受订单进度通知</view>
        <view style="color: #969799" class="u-flex"
          >去设置
          <image
            src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/613c4765630da20011c12125/61404a82a316460011193b1d/16318489489126392315.png"
            class="order-image_1"
        /></view>
      </view> -->
      
      <!-- 訂單狀態 -->
      <view class="justify-between bgf u-margin-bottom-16">
        <view class="statusBox">
          <view class="h1 fz-28" :class="{'u-padding-top-20': orderDetails.status !== 1}">{{comparedValue(orderStatus, orderDetails.status)}}</view>
          <view v-if="orderDetails.status === 1 && orderDetails.timeFormat"
            >请在<text class="themeFontColor">{{orderDetails.timeFormat || '00:00:00'}}</text>内完成支付</view
          >
        </view>
        <view class="u-p-r-30">
          <image
            style="width: 160rpx; height: auto"
            :src="statusIconSrc"
            mode="widthFix"
          />
        </view>
      </view>
      <!-- 快递信息 -->
      <view class="flex-col order_section_13 bgf">
        <view class="justify-between order_group_10">
          <text class="fz-16 fw5">收货信息</text>
          <view class="u-flex" v-if="orderDetails.courierInformationVOList && orderDetails.courierInformationVOList.length">
            <view @click="goLogistics(orderDetails.orderAllId)">查看物流</view>
            <image
              src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/613c4765630da20011c12125/61404a82a316460011193b1d/16318489489126392315.png"
              class="order_image_9"
            />
          </view>
        </view>
        <view class="cellBox1 fz-12 u-p-t-20" v-if="orderDetails.courierInformationVOList && orderDetails.courierInformationVOList.length">
          <view class="ov1 linh-20" v-for="(locaMsg,locaIdx) in orderDetails.courierInformationVOList" :key="locaIdx" v-if="locaMsg.data">{{locaMsg.data}}</view>
        </view>
        <view class="tc cellBox1 fz-14" v-if="orderDetails.courierInformationVOList && orderDetails.courierInformationVOList.length > 3" @click="goLogistics(orderDetails.orderAllId)">查看更多</view>
        <view class="order_group_13 fz-12 u-p-t-20 u-p-b-20">
          <view class="u-flex linh-20">
            <image
              src="https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/icon/avatar3_icon.png"
              class="order_image_10"
              mode="widthFix"
            />
            <view class="order_text_23">{{orderDetails.receiveName}}</view>
            <view class="order_text_23">{{orderDetails.receiveMobile}}</view>
          </view>
          <view class="order_text_24" v-if="orderDetails.freightType !== 2">{{orderDetails.receiveAddress}}</view>
          <view class="u-flex linh-20 u-p-t-10" v-if="orderDetails.remark">
            <image
              src="https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/icon/wenjian_icon.png"
              class="order_image_10"
              mode="widthFix"
            />
            <view class="order_text_23">备注：</view>
            <view class="order_text_23">{{orderDetails.remark || ''}}</view>
          </view>
        </view>
      </view>
      <!-- 商品信息 -->
      <view class="bgf" style="box-shadow: inset 0px -1px 0px #EEEEEE;">
        <view v-for="(goods, goodsIdx) in orderDetails.orderGoodsDetailsRespVOList" :key="goodsIdx" class="goodsBox">
          <view class="u-flex" @click.stop="navigateTo({url: `/pagesB/goods/goodsDetails?shopWindowId=${goods.shopWindowId}`})">
            <image
              class="goodsImage"
              :src="goods.goodsImages"
            />
            <view class="goodsMsg">
              <view class="name ov1">{{goods.goodsName}}</view>
              <view class="outh">数量：{{goods.count}}<text class="u-padding-left-20">{{goods.skuName}}</text></view>
              <view class="plice themeFontColor">￥{{goods.salePrice}}</view>
            </view>
          </view>
          <!-- 虚拟物品不支持售后 -->
          <view class="justify-end u-margin-top-10" v-if="orderDetails.freightType !== 2">
            <button class="goodsBtn1 huuiduColor" v-if="orderDetails.status !== 1 && orderDetails.status !== 2 && goods.isAfterSale !== 2" @click="_openGoType(goods)">退款/售后 </button> 
            <button class="goodsBtn1 huuiduColor" v-if="orderDetails.status !== 1 && orderDetails.status !== 2 && goods.isAfterSale !== 1" @click="_goAfersaleDetails(goods.orderAfterSalesId)">售后详情</button> 
            <!-- <button class="goodsBtn1 themeFontColor">再次购买</button> -->
            <!-- <button class="goodsBtn1 themeFontColor">评价 </button> -->
          </view>
        </view>
      </view>
      <!-- 商品金额 -->
      <view class="bgf u-margin-bottom-20 u-padding-left-32 u-padding-right-32 fz-12">
        <view class="justify-between linh-26 viceColor">
          <view>商品金额</view>
          <view>￥{{orderDetails.payPrice || '0.00'}}</view>
        </view>
        <view class="u-text-right linh-48">
          <text class="u-padding-right-20" v-show="orderDetails.count">共{{orderDetails.count}}件</text>
          <text>实际支付：</text>
          <text class="fz-14 fw5 themeFontColor">￥{{orderDetails.payPrice || '0.00'}}</text>
        </view>
      </view>
      <!-- 拼团信息 -->
      <view class="justify-between order_section_11 u-m-b-20 bgf" v-if="orderDetails.dynamicId">
        <view class="fz-16 fw5">
          团购信息
        </view>
        <view class="u-flex u-col-center u-row-right" style="flex:1;" @click="navigateTo({url: `/pagesB/dynamic/${orderDetails.mediaType && orderDetails.mediaType === 1 ? 'graphicsDetail' : 'videoDetail'}?type=1&dynamicId=${orderDetails.dynamicId}`})">
          <view style="max-width:250rpx;" class="ov1" v-if="orderDetails.title||orderDetails.content">
            {{orderDetails.title||orderDetails.content}}
          </view>
          <u-icon name="arrow-right" color="#969799" />
        </view>
      </view>
      <!-- 订单信息 -->
      <view class="bgf u-margin-bottom-20 u-padding-bottom-20 u-padding-left-32 u-padding-right-32">
        <view class="fz-16 fw5 linh-48" style="box-shadow: inset 0px -1px 0px #EBEDF0;">订单信息</view>
        <view class="u-flex linh-28 fz-12 viceColor" v-if="orderDetails.followGroupNum">
          <view style="width:120rpx">跟团号：</view>
          <view>{{orderDetails.followGroupNum}}</view>
        </view>
        <view class="u-flex linh-28 fz-12 viceColor">
          <view style="width:120rpx">下单人：</view>
          <image :src="orderDetails.avatar" class="orderAvatar" mode="aspectFill" />
          <view>{{orderDetails.nickname}}</view>
        </view>
        <view class="u-flex linh-28 fz-12 viceColor">
          <view style="width:120rpx">订单编号：</view>
          <view>{{orderDetails.orderAllId}}</view>
          <button class="editLocBtn fz-12 u-m-l-20" @click="_copyOrderNo(orderDetails.orderAllId)">复制</button>
        </view>
        <view class="u-flex linh-28 fz-12 viceColor" v-if="orderDetails.payTime">
          <view style="width:120rpx">支付时间：</view>
          <view>{{orderDetails.payTime}}</view>
        </view>
        <view class="u-flex linh-28 fz-12 viceColor" v-if="orderDetails.type === 2">
          <view style="width:120rpx">订单类型：</view>
          <view>购样订单</view>
        </view>
      </view>
      <!-- 底部固定按钮 -->

      <!-- 待支付：联系团长，取消订单，立即支付 -->
      <view class="safe-bottom justify-end bgf u-padding-top-20 u-padding-right-32 posFixed" v-if="orderDetails.status === 1">
        <button class="btmBtn1 themeFontColor u-margin-bottom-20" @click="connection(orderDetails.groupAccountId)">联系团长</button>
        <button class="btmBtn1 themeFontColor u-margin-bottom-20" @click="_closeOrder(orderDetails)">取消订单</button>
        <button class="btmBtn1 themeBgColor u-margin-bottom-20" :disabled="payDisabledType" @click="_immediatelydPay(orderDetails)">{{payDisabledType?'支付中...':"立即支付"}}</button> 
      </view>
      <!-- 待收货：联系团长，再来一单，确认收货 -->
      <view class="safe-bottom justify-end bgf u-padding-top-20 u-padding-right-32 posFixed" v-if="orderDetails.status === 5">
        <button class="btmBtn1 themeFontColor u-margin-bottom-20" @click="connection(orderDetails.groupAccountId)">联系团长</button>
        <button class="btmBtn1 themeBgColor u-margin-bottom-20" @click="receipt(orderDetails.orderAllId)">确认收货</button> 
      </view>
      <!-- 已取消||已关闭||待发货||已收货||已完成：，再次购买 -->
      <view class="safe-bottom justify-end bgf u-padding-top-20 u-padding-right-32 posFixed" v-if="orderDetails.status !== 1 && orderDetails.status !== 5">
        <button class="btmBtn1 themeFontColor u-margin-bottom-20" @click="connection(orderDetails.groupAccountId)">联系团长</button>
      </view>
    </view>

    <!-- 取消原因弹窗 -->
    <u-popup v-model="closeOrderShow" mode="bottom" border-radius="24" @maskClick="closeOrderShow = false">
      <view>
        <view class="headTitle">请选择取消原因</view>
        <scroll-view scroll-y style="height:500rpx;" class="listBody"> 
          <view class="u-padding-left-32 u-padding-right-32 linght44 u-flex u-row-between" v-for="(tx,idx) in otherReasons" :key="idx" @click="_otherReasonsChange(idx)">
            <view>{{tx}}</view>
            <u-icon name="checkbox-mark" class="themeFontColor" size="28" v-if="idx === otherReasonsActive"></u-icon>
          </view>
        </scroll-view>
        <view class="fz-12 tc u-padding-top-8 u-padding-bottom-8">订单关闭后<text class="themeFontColor">无法恢复</text>，你可以重新下单购买</view>
        <view class="themeBgColor configBtn" @click="_configClose">确认关闭</view>
        <view v-if="isIOS" class="safe-bottom"></view>
      </view>
		</u-popup>

    <u-modal v-model="otherReasonsShow" show-cancel-button confirm-text="确定关闭" confirm-color="#E44435" title="其他原因" :title-style="{lineHeight: '44rpx',paddingBottom: '16rpx'}" @confirm="_configClose">
      <view>
        <view class="tc fz-12" style="color:#969799;">说明原因以方便团长更好的为你服务</view>
        <view class="u-padding-30 u-padding-left-45 u-padding-right-45 placeholderClass">
          <u-input v-model="cancelReason" type="textarea" :clearable="false" placeholder="请输入原因" :custom-style="{backgroundColor: '#F7F8FA',borderRadius: '16rpx',minHeight: '240rpx',padding: '24rpx 32rpx'}" />
        </view>
      </view>
    </u-modal>

    <!-- 退款类型 -->
    <u-popup v-model="afterTypeShow" mode="bottom" border-radius="24" @maskClick="afterTypeShow=false">
      <view class="safe-bottom">
        <view class="fz-18 fw5 tc linh-48">请选择退款类型</view>
        <view class="justify-between items-center u-p-l-32 u-p-r-32 u-p-t-25 u-p-b-25" @click="_goAfterSale(1)">
          <view>
            <view class="fz-16">我要退款（无需退货）</view>
            <view class="viceColor u-p-t-8">未收到货/或申请不退款直接退货</view>
          </view>
          <view><u-icon name="arrow-right"></u-icon></view>
        </view>
        <view class="justify-between items-center u-p-l-32 u-p-r-32 u-p-t-25 u-p-b-25" @click="_goAfterSale(2)">
          <view>
            <view class="fz-16">我要退货退款</view>
            <view class="viceColor u-p-t-8">已收到货，申请寄回货物并退款</view>
          </view>
          <view><u-icon name="arrow-right"></u-icon></view>
        </view>
      </view>
		</u-popup>
  </PublicPage>
</template>
<script>
import orderApi from "@/api/orderApi.js";
import { comparedValue, orderStatus } from "@/utils/statusList"
import mixin from "@/pages/order/components/myBuyOrder.js";
import PublicPage from "@/components/publicPage/index.vue";

export default {
  mixins: [mixin],
  components: {
    PublicPage
  },
  data() {
    return {
      isIOS: uni.getSystemInfoSync().system.indexOf("Android") !== 0,
      routeData: {},
      orderDetails: {},
      timer: null,
      afterTypeShow: false,
      clickGoods: {}
    };
  },
  computed: {
    orderStatus(){
      return orderStatus
    },
    statusIconSrc(){
      if(this.orderDetails.status === 1){
        return 'https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/other/order_1.png'
      }else if(this.orderDetails.status === 2){
        return 'https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/other/order_3.png'
      }else if(this.orderDetails.status === 3){
        return 'https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/other/order_2.png'
      }else if(this.orderDetails.status === 4){
        return 'https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/other/order_5.png'
      }else if(this.orderDetails.status === 5){
        return 'https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/other/order_4.png'
      }else if(this.orderDetails.status === 6 || this.orderDetails.status === 6){
        return 'https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/other/order_7.png'
      }
    }
  },
  onLoad(r) {
    this.routeData = r;
  },
  onShow(){
    this._getOrderDetails()
  },
  methods: {
    comparedValue,
    goBackFn () {
      let routeArr = getCurrentPages()
      let pageLength = 1
      if (routeArr.length>=2&&routeArr[routeArr.length-2].route == 'pagesA/shoppingCar/confirmOrder') {
        this.$store.commit('GROUPS_BUY_TYPE', true)
        pageLength = 2
      }
      this.navigateBack({
        delta: pageLength
      })
    },
    // 获取订单详情
    _getOrderDetails(){
      orderApi.myBuyOrderListDetails(this.routeData).then(res=>{
        this.orderDetails = res.data
        this._beginTimer()
      })
    },
    // 未支付倒计时
    _beginTimer(){
      if(this.orderDetails.status === 1){ // 只在未支付出现倒计时
        this.timer = setInterval(() => {
          let endTime = Date.parse(new Date(this.orderDetails.createTime.replace(/-/g, "/"))) + 300000 // 截止时间戳
          let newTime = Date.parse(new Date())
          let timeFormat = endTime > newTime ? endTime - newTime : 0 // 剩余时间
          if (timeFormat > 0) {
            this.$set(this.orderDetails,'timeFormat',this._countDownmintus(timeFormat))
          }else{ // 超时前端静默更新状态
            this.orderDetails.status = 2
          }
        }, 1000);
      }
    },
    // 复制单号
    _copyOrderNo(id){
      uni.setClipboardData({
        data: id,
        showToast: false,
        success: function () {
          uni.showToast({
            title: '单号已复制',
            icon: 'success'
          });
        }
      });
    },
    _openGoType(goods){
      if(this.orderDetails.status === 7){
        uni.showToast({
          title: '该订单已过售后期',
          icon:'none'
        })
        return
      }
      
      this.clickGoods = goods
      if(goods.status === 4){ // 待发货直接进入我要退款
        this._goAfterSale(1)
      }else{
        this.afterTypeShow = true
      }
    },
    // 申请售后 type: 1 我要退款（无需退货） 2:我要退货退款
    _goAfterSale(applyType){
      this.afterTypeShow = false
      uni.navigateTo({url: `/pagesA/order/aftersale?applyType=${applyType}&orderAllId=${this.orderDetails.orderAllId}&goodsId=${this.clickGoods.id}`});
    },
    // 联系团长
    connection(groupAccountId){
      if(this.$store.state.imUserInfo.imId === groupAccountId){
        uni.showToast({
          title: '不能联系自己',
          icon: 'none'
        });
        return
      }else{
        this.navigateTo({url: '/pagesB/message/messageDetails?id='+groupAccountId})
      }
    }
  },
};
</script>
<style lang="scss" scoped>
.orderDetails {
  height: calc(100% - 96rpx);
  overflow: auto;
  .bgf {
    background-color: #fff;
    .orderAvatar {
      width: 40rpx;
      height: 40rpx;
      margin-right: 8rpx;
      border-radius: 40rpx;
    }
  }
  .title {
    line-height: 80rpx;
    padding: 0 32rpx;
    background-color: #fffbe8;
  }
  .order-image_1 {
    margin: 3rpx 0 5rpx 13rpx;
    width: 14rpx;
    height: 24rpx;
  }
  .h1 {
    color: #000;
    font-weight: 500;
    line-height: 78rpx;
  }
  .statusBox {
    padding: 20rpx 32rpx;
  }
  .order_section_13 {
    color: rgba(0, 0, 0, 0.9);
    margin-bottom: 20rpx;
  }
  .order_group_10 {
    font-size: 28rpx;
    line-height: 80rpx;
    white-space: nowrap;
    padding: 0 32rpx;
    box-shadow: inset 0px -1px 0px #eeeeee;
  }
  .order_image_9 {
    margin-left: 13rpx;
    width: 14rpx;
    height: 24rpx;
  }

  .cellBox1 {
    padding: 0 32rpx;
    line-height: 80rpx;
    color: #969799;
  }
  .ov1 {
    @include toe();
  }
  .order_group_13 {
    padding: 0 32rpx;
    line-height: 34rpx;
    white-space: nowrap;
    color: #969799;
  }
  .order_image_10 {
    width: 28rpx;
    height: auto;
    flex-shrink: 0;
  }
  .order_text_23 {
    margin-left: 18rpx;
    white-space: normal;
    max-width: 550rpx;
  }
  .order_text_24{
    margin-left: 48rpx;
    white-space: normal;
  }
  .order_image_11 {
    width: 14rpx;
    height: 24rpx;
    margin-top: 2rpx;
    margin-left: 13rpx;
    flex-shrink: 0;
  }
  .order_section_11 {
    padding: 24rpx 32rpx;
    box-shadow: inset 0px -1px 0px #eeeeee;
  }
  .huuiduColor{
    color:#969799;
  }
  .goodsBox {
    padding: 32rpx;
    .goodsImage {
      width: 160rpx;
      height: 160rpx;
      border-radius: 8rpx;
      margin-right: 20rpx;
      flex-shrink: 0;
    }
    .goodsMsg {
      flex: 1;
      .name {
        width: 500rpx;
        color: rgba(0, 0, 0, 0.9);
        @include toe();
      }
      .outh {
        color: #969799;
        font-size: 24rpx;
        padding-top: 16rpx;
      }
      .plice {
        padding-top: 32rpx;
      }
    }
    .goodsBtn1{
      font-size: 24rpx;
      line-height: 40rpx;
      white-space: nowrap;
      border-radius: 40rpx;
      text-align: center;
      padding: 0 16rpx;
    }
    .goodsBtn1.themeFontColor{
      border: solid 1px $themeColor;
    }
    .goodsBtn1.huuiduColor{
      border: solid 1px #969799;
    }
    .goodsBtn1+.goodsBtn1{
      margin-left: 20rpx;
    }
  }
  .btmBtn1{
    font-size: 28rpx;
    line-height: 50rpx;
    white-space: nowrap;
    border-radius: 50rpx;
    text-align: center;
    padding: 0 20rpx;
  }
  .btmBtn1.themeFontColor{
    border: solid 1px $themeColor;
  }
  .btmBtn1.themeBgColor{
    color: #FFF;
  }
  .btmBtn1+.btmBtn1{
    margin-left: 20rpx;
  }
  .copyBtn{
    padding: 0 20rpx;
    margin-left: 20rpx;
    height: 40rpx;
    line-height: 40rpx;
    border: solid 1px #DCDEE0;
    color: #323232;
  }
  .posFixed{
    position: fixed;
    width: 100%;
    bottom: 0;
    box-shadow: inset 0px 1px 0px #EBEDF0;
  }
}

.headTitle {
  color: rgba(0, 0, 0, 0.9);
  line-height: 96rpx;
  font-weight: 500;
  font-size: 36rpx;
  text-align: center;
}
.listBody{
  background-color: #F7F8FA;
  .linght44{
    line-height: 88rpx;
    background-color: #FFF;
  }
}

.configBtn{
  margin:0 32rpx;
  border-radius: 8rpx;
  line-height: 96rpx;
  text-align: center;
  color: #FFF;
}

.editLocBtn{
  padding: 2rpx 16rpx;
  border: solid 1px #eee;
  border-radius: 6rpx;
  color: #323232;
  height: 42rpx;
  line-height: initial;
}
</style>